<template>
	<div class="pswp"  tabindex="-1" role="dialog" aria-hidden="true">

    <div class="pswp__bg"></div>

    <div class="pswp__scroll-wrap">


        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
</template>

<script>
	
	import 'photoswipe/dist/photoswipe.css'
	
	import 'photoswipe/dist/default-skin/default-skin.css'
	
	import PhotoSwipe from 'photoswipe/dist/photoswipe.min.js'
	
	import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.min.js'
	
//	import lightBox from 'photoswipe'
	
	export default {
		  components: {
		
		  },
		  watch: {
			// selected:function(newVal){
			// 	console.log(this.selected,'selectedTrue');
			// 	if (newVal) {
			// 		this.showPic();
			// 	}				
			// },
			// visiblable:function(newVal){
			// 	console.log(this.selected,'selected');
			// 	if (newVal) {
	
			// 		this.showPic();
			// 	}
			// },
			
		  },
		  created () {
		
		  },
		  mounted () {
		
		
		  },
			
		  data () {
		    return {
				gallery:null,
		    };
		  },
		  
		  props:{
		  	selected:{
		  		type:Number,
		  		default:0,
		  	},
		  	visiblable:{
		  		type : Boolean,
		  		default:false,
		  	},
		  	imgUrlList:{
		  		type:Array,
		  		default:function(){
		  			return [];
		  		}
		  	}
		  },
		  
		  methods: {
			  showPic:function(){
			  	
					  var pswpElement = document.querySelectorAll('.pswp')[0];
					  
					  var imgContainer = document.querySelectorAll('.imgContainer')[0].children;

					var items=[];
					
					this.imgUrlList.forEach((val,index) =>{
						items.push({
					        src: val,
					        w: imgContainer[index].naturalWidth,
					        h: imgContainer[index].naturalHeight
					    })
					})
					
//					var items = [
//					    {
//					        src: '/static/images/leader.jpg',
//					        w: 1200,
//					        h: 900
//					    },
//					    {
//					        src: '/static/images/default1.jpg',
//					        w: 1200,
//					        h: 900
//					    }
//					];
//					
			
					var options = {
			
					    index: this.selected ,
					    shareEl: false,
				        history: false,
				        focus: false,
				
				        showAnimationDuration: 0,
				        hideAnimationDuration: 0
					};
					
			
					var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
					gallery.init();
					
//					this.gallery.listen('close', () =>{ 
//						this.gallery.destroy()
//					});
					
					
			  },
			  distoryInstance:function(){
			  	
			  }
		  }
	};
</script>
</script>

<style>
	div.pswp{
		z-index:15000;
	}
</style>